<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../vue.js"></script>
</head>

<body>
    表单修饰符
    .number ： 将表单中value的字符串格式转化为数值
    .lazy 值改变+失去焦点 ---》同步数据
    .trim 去掉前后空格
    <div id="app">
        <input type="text" v-model.trim="inp" @keydown="show">
        <h1>{{inp}}</h1>

        <select v-model="selecteda">
            <option>--请选择--</option>
            <option v-for="item in options" :key="item.value" :value="item.value">{{item.text}}</option>
        </select>
        <h1>{{selecteda}}</h1>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                inp: "",
                selecteda: "",
                options: [
                    { text: 'One', value: 'A' },
                    { text: 'Two', value: 'B' },
                    { text: 'Three', value: 'C' }
                ]
            },
            methods: {
                show() {
                    //    console.log(typeof this.inp);
                    console.log(this.inp.length);
                }
            }
        })
    </script>
</body>

</html>